<!--
 * @Author: your name
 * @Date: 2021-03-31 23:46:20
 * @LastEditTime: 2021-04-01 15:19:51
 * @LastEditors: Please set LastEditors
 * @Description: DOM操作
 * @FilePath: \jQuery\03 - DOM操作.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM操作</title>
  <script src="./jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      // 1.内容操作
      // .text()
      console.log($('.box1').text()); // 123
      // 添加参数，修改内容,页面显示<p>abc</p>
      $('.box1').text('<p>abc</p>')
      // .html()
      console.log($('.box2').html());
      // 添加参数，页面显示p段落标签格式的abc
      $('.box2').html('<p>abc</p>')
      // .val()
      console.log($('.input1').val()); // Hello
      $('.input1').val('World') // 输入框内容变为World

      // 2.属性操作
      // .attr()
      console.log($('.input1').attr('type')); // text 获取type属性值
      $('.input1').attr('type', 'password') // 将type属性值从text改为password
      
      // 3.添加html元素
      // append()在被选元素的结尾插入内容 - 在.box3内容的结尾加入内容
      // $('.box3').append('1111') // 盒子里的内容变为“我是盒子31111”
      // prepend()在被选元素的开头插入内容 - 在.box3内容的开头加入内容
      // $('.box3').prepend('aaa') // 盒子内容变为“aaa我是盒子3”
      // after() - 在被选元素之后插入内容 - 再.box3盒子后面加入内容
      // $('.box3').after('111') // 在盒子的外部后面显示“111”
      // before() - 在被选元素之前插入内容
      // $('.box3').before('aaa') // 在盒子外部前面显示“aaa”

      // 4.删除元素/内容
      // $('.content1').remove() // 删除.content1元素及内容
      // $('.content').empty() // 删除子元素

      // 5.操作CSS
      // 1.addClass添加样式
      // $('.none_class').addClass('box4') // 添加样式
      // 2.removeClass移除样式
      // $('.none_class').removeClass('box4') // 移除样式
      // 添加和移除样式切换
      $('.change-css').click(function() {
        $('.none_class').toggleClass('box4')
      })
      // css()修改样式属性
      $('.change-color').click(function() {
        $('.none_class').css('background-color', 'gray')
      })
    })
  </script>
  <style>
    .box3 {
      /* width: 200px;
      height: 200px; */
      background-color: gray;
      margin-top: 30px;
    }
    .content {
      background-color: rgba(180, 209, 140, 0.781);
    }
    .box4 {
      width: 200px;
      height: 200px;
      background-color: rgb(214, 161, 161);
    }
  </style>
</head>
<body>
  <div class="box1">123</div>
  <div class="box2">box2</div>
  <input type="text" class="input1" value="Hello">
  <br />
  <br />
  <br />
  <span class="box3">我是盒子3</span>
  <br />
  <br />
  <ul class="content">
    <li class="content1">
      <span>内容1</span>
    </li>
    <li class="content2">内容2</li>
    <li class="content3">内容3</li>
  </ul>

  <br />
  <br />
  <br />
  <button class="change-css">添加/移除样式</button>
  <button class="change-color">修改背景颜色</button>
  <div class="none_class box4"></div>
</body>
</html>